<nz-layout class="layout">
  <nz-sider
    nzTheme="light"
    [nzWidth]="siderWidth"
    nz-resizable
    [nzMinWidth]="120"
    [nzMaxWidth]="400"
    (nzResize)="onSideResize($event)"
    (nzResizeEnd)="onResizeEnd()"
  >
    <!-- <div class="side-container"> -->
    <nz-content class="api-container-tabs">
      <nz-tabset
        [ngClass]="{ 'share-group-tabset': status.isShare }"
        nzCentered
        [nzAnimated]="false"
        [(nzSelectedIndex)]="tabsIndex"
      >
        <nz-tab [nzTitle]="apiTitle">
          <ng-template #apiTitle>
            <span
              i18n-nzTooltipTitle
              nzTooltipTitle="Collections"
              nz-tooltip
              [nzTooltipMouseEnterDelay]="0.7"
              class="text-lg tab-content"
            >
              <eo-iconpark-icon name="folder-open"></eo-iconpark-icon>
            </span>
          </ng-template>
          <div class="inner-content">
            <eo-api-group-tree></eo-api-group-tree>
          </div>
        </nz-tab>
        <nz-tab [nzTitle]="historyTitle" *ngIf="!status.isShare">
          <ng-template #historyTitle>
            <span
              i18n-nzTooltipTitle
              nzTooltipTitle="History"
              nz-tooltip
              [nzTooltipMouseEnterDelay]="0.7"
              class="text-lg tab-content"
            >
              <eo-iconpark-icon name="history"></eo-iconpark-icon>
            </span>
          </ng-template>
          <eo-history></eo-history>
        </nz-tab>
      </nz-tabset>
    </nz-content>
    <nz-resize-handle nzDirection="right">
      <div class="sider-resize-line" [ngClass]="{ 'is-drag': isDragging }"><i></i><i></i><i></i><i></i></div>
    </nz-resize-handle>
    <!-- </div> -->
  </nz-sider>
  <nz-layout class="right-layout">
    <nz-content>
      <div class="inner-content">
        <div class="flex items-center tabs-bar">
          <eo-api-tab
            class="fg1"
            [list]="apiTab.BASIC_TABS"
            [handleDataBeforeCache]="apiTab.handleDataBeforeCache"
            [checkTabCanLeave]="apiTab.componentRef?.checkTabCanLeave"
            (beforeClose)="apiTab.beforeTabClose($event)"
            #apiTabComponent
          ></eo-api-tab>
          <div class="flex items-center fix-mt">
            <nz-select
              [(ngModel)]="envUuid"
              [(nzOpen)]="isOpen"
              (nzOpenChange)="handleEnvSelectStatus($event)"
              [nzDropdownRender]="renderTemplate"
              nzAllowClear
              i18n-nzPlaceHolder="Environment Dropdown placeholder"
              nzPlaceHolder="Environment"
              #envSelect
            >
              <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
            </nz-select>
            <ng-template #renderTemplate>
              <nz-divider *ngIf="!status.isShare"></nz-divider>
              <a
                *ngIf="!status.isShare"
                class="text-sx manager-env"
                nz-button
                nzType="link"
                (click)="gotoEnvManager()"
                i18n
                >Manage Environment</a
              >
            </ng-template>
            <span
              class="flex items-center justify-center mx-1 icon"
              i18n-nzTooltipTitle
              nz-tooltip
              [nzTooltipMouseEnterDelay]="0.8"
              [nzTooltipMouseLeaveDelay]="0"
              nzTooltipTitle="Enviroment Quick Look"
              nz-popover
              [nzPopoverContent]="envParams"
              nzTooltipPlacement="bottomRight"
              nzPopoverPlacement="bottomRight"
              nzPopoverTrigger="click"
            >
              <eo-iconpark-icon name="eyes"></eo-iconpark-icon>
            </span>
            <ng-template #envParams>
              <env-list></env-list>
            </ng-template>
          </div>
        </div>
        <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
          <nz-tabset
            class="inside_page_tabset"
            [nzTabBarStyle]="{ 'padding-left': '10px' }"
            *ngIf="this.id"
            nzLinkRouter
          >
            <nz-tab *ngFor="let tab of renderTabs">
              <p *ngIf="web.isWeb && tab.onlyDestop">
                <span *nzTabLink nz-tab-link (click)="goDownload($event)">{{ tab.title }}</span>
              </p>
              <div *ngIf="!web.isWeb || !tab.onlyDestop">
                <a *nzTabLink nz-tab-link [routerLink]="['http/' + tab.routerLink]" queryParamsHandling="merge">
                  {{ tab.title }} <nz-badge *ngIf="apiTabComponent.getCurrentTab()?.extends?.hasChanged?.[tab.routerLink]" nzStatus="success"></nz-badge
                ></a>
              </div>
            </nz-tab>
          </nz-tabset>
        </div>
        <section class="relative" [ngStyle]="{ paddingRight: countPaddingRight() }">
          <!-- Get router child component by activate -->
          <router-outlet (activate)="onActivate($event)"></router-outlet>
          <eo-split-x
            *ngIf="activeBar && !status.isShare"
            (x)="handleDrag($event)"
            [init]="[200, dyWidth, 400]"
          ></eo-split-x>
          <div
            *ngIf="!status.isShare"
            class="absolute top-0 bottom-0 right-0 flex right-bar"
            [ngClass]="{ 'left-line': !activeBar }"
            [ngStyle]="{ width: activeBar ? dyWidth + 'px' : '40px' }"
          >
            <div
              class="flex items-center justify-center w-[40px] p-2 h-10 env-icon"
              [ngClass]="activeBar ? 'active' : ''"
              (click)="toggleRightBar()"
              nz-tooltip
              [nzTooltipMouseLeaveDelay]="0"
              i18n-nzTooltipTitle="@@Environment Setting"
              nzTooltipTitle="Environment Setting"
            >
              <eo-iconpark-icon name="instruction"></eo-iconpark-icon>
            </div>
            <eo-env *ngIf="activeBar" class="flex-auto" (statusChange)="toggleRightBar(false)"></eo-env>
          </div>
        </section>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
